<!--
 * @Author: your name
 * @Date: 2020-12-15 15:17:36
 * @LastEditTime: 2020-12-15 15:29:49
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \Web\JQuery基础\Ch7JQuery的Ajax操作\03$.post方法请求数据.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../JQ/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $.post("03post.php",{username:$("#username").val(),content:$("#content").val()},function(data,textStatus){
                $("#responseText").html("用户名:"+data.username+"<br>留言内容:"+data.content);
            },"json")
        })
    </script>
</head>
<body>
    <form action="" name="form">
        用户名: <input type="text" id="username"><br><br>
        内容: <textarea id="content"></textarea><br><br>
        <input type="button" id="button" value="提交"><br><br>
        <div id="responseText"></div>
    </form>
</body>
</html>

<!--
    post和get传递数据的不同
        get传递2KB以下的数据，数据追加到URL中发送。会被游览器缓存起来。这样别人也可以从游览器的历史读取到客户端的信息，有安全隐患。
        
        post传递时，不在URL中，而是将数据作为HTTP消息实体发送给web服务器，避免数据被游览器缓存，比get方式更安全，数据量更多。

    $.post(url[,data][,callback][,type])
    url:请求的HTML页面的URL地址
    data:可选参数，发送到服务器的数据
    callback:可选参数，规定当请求成功时运行的函数
    type:可选参数，预计的服务器响应的数据类型。默认地，JQuery将智能判断

-->